<template>
  <div>
    <div class="header">
      <div class="header-left">
        <el-date-picker
          v-model="startTime"
          type="datetime"
          placeholder="选择日期时间"
          :picker-options="pickerOptions"
          value-format="timestamp"
          @change="changeTime"
        />
        <span style="padding: 8px">--</span>
        <el-input v-model="endTime" disabled />
        <el-button type="primary" plain class="refreshButton" @click="refresh()"
          >刷新</el-button
        >
      </div>

      <div class="header-right">
        <div class="header-right-main">
          <span class="header-right-word">正在执行zip数量： </span>
          <span class="header-right-nums">{{ uncommitdZip.zip_nums }}</span>
          <span class="header-right-word header-right-word1"
            >zip中待提交任务数量：
          </span>
          <span class="header-right-nums header-right-nums1">{{
            uncommitdZip.job_nums
          }}</span>
        </div>
      </div>
    </div>
    <ve-histogram
      :data="chartData"
      :settings="chartSettings"
      :loading="loadings"
      :extend="chartExtend"
    />

    <ve-histogram
      :data="chartDatas"
      :settings="chartSetting"
      :loading="loadings"
      :extend="chartExtend"
    />
  </div>
</template>

<script>
import {
  getPoolsList,
  getCalculateUncommit
} from '@/api/rateLimiter/RateLimitInfo'
import 'v-charts/lib/style.css'
export default {
  name: 'Stat',
  components: {},
  data() {
    return {
      chartData: {},
      chartDatas: {},
      chartSettings: {},
      chartSetting: {},
      chartExtend: {},
      uncommitdZip: {},
      endTime: '至今',
      loadings: true,
      time: '',
      startTime: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() + 3600 > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      }
    }
  },

  created() {
    this.getCalculateUncommitData()
    this.chartSetting = {
      yAxisName: ['线程池-排队处理的任务'],
      stack: {
        占比: ['NLPQueue', 'TTSQueue', 'VideoComposeQueue']
      },
      labelMap: {
        NLPQueue: 'NLP正在排队的线程数',
        TTSQueue: 'TTS正在排队的线程数',
        VideoComposeQueue: '合成排队的线程数'
      }
    }
    this.chartSettings = {
      yAxisName: ['线程池-正在处理的任务'],
      stack: {
        占比: ['TTSActive', 'NLPActive', 'VideoComposeActive']
      },
      labelMap: {
        TTSActive: 'TTS正在执行的线程数',
        NLPActive: 'NLP正在执行的线程数',
        VideoComposeActive: '合成正在执行的线程数'
      }
    }
    this.chartExtend = {
      yAxis(item) {
        item[0].splitLine = {
          show: false
        }
        return item
      },
      grid: {
        show: true,
        left: '50'
      }
    }
    const params = {
      time: ''
    }
    this.getData(params)
  },

  methods: {
    getCalculateUncommitData() {
      getCalculateUncommit()
        .then(res => {
          if (res.code === 200) {
            this.uncommitdZip = res.data
          } else {
            this.uncommitdZip = {
              job_nums: '--',
              zip_nums: '--'
            }
            this.$message.error(res.msg)
          }
        })
        .catch(() => {
          this.uncommitdZip = {
            job_nums: '--',
            zip_nums: '--'
          }
        })
    },

    getData(params) {
      getPoolsList(params)
        .then(res => {
          console.log(res)
          this.loadings = false
          res.data.list.map(item => {
            return (item.create_time = item.create_time.substring(11, 19))
          })
          this.chartData = {
            columns: [
              'create_time',
              'TTSActive',
              'NLPActive',
              'VideoComposeActive'
            ],
            rows: res.data.list
          }
          this.chartDatas = {
            columns: [
              'create_time',
              'NLPQueue',
              'TTSQueue',
              'VideoComposeQueue'
            ],
            rows: res.data.list
          }
        })
        .catch(() => {
          this.loadings = false
        })
    },

    refresh() {
      const params = {
        time: this.time
      }
      this.loadings = true
      this.getData(params)
      this.getCalculateUncommitData()
    },

    changeTime(time) {
      console.log(time, this.formatDate(time))
      if (time && time + 3600000 < Date.now()) {
        this.$message.error('只能选择一个小时以内的')
      }
      this.time = time ? this.formatDate(time) : ''
    },

    formatDate(time) {
      console.log(Date)
      var date = new Date(time)
      var YY = date.getFullYear() + '-'
      var MM =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-'
      var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hh =
        (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var mm =
        (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) +
        ':'
      var ss =
        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return YY + MM + DD + ' ' + hh + mm + ss
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  margin-top: 24px;
  margin-bottom: 36px;
  margin-left: 12px;
}
.header-left {
  flex: 1;
}
.header-right {
  // flex: 1;
  text-align: right;
}
.header-right-main {
  // border: 1px solid #909399;
}
.header-right-word {
  font-size: 20px;
  font-family: STKaiti;
}
.header-right-word1 {
  margin-left: 28px;
}
.header-right-nums {
  font-size: 22px;
  color: red;
}
.header-right-nums1 {
  margin-right: 16px;
}
::v-deep .el-input {
  width: 220px;
}
.refreshButton {
  margin-left: 20px;
}
</style>
